
<template>
  <div class="app-container examine">
    <el-tabs v-model="listQuery.bizType" @tab-click="tabChange($event,1)">
      <el-tab-pane v-if="$store.state.user.name!='activity_mcn'" name="1" label="媒资"/>
      <el-tab-pane name="5" label="用户上传"/>
      <el-tab-pane v-if="$store.state.user.name!='activity_mcn'" name="2" label="运营上传"/>
      <el-tab-pane name="3" label="主持人上传"/>
      <el-tab-pane v-if="$store.state.user.name!='activity_mcn'" name="4" label="广告"/>
      <el-tab-pane v-if="$store.state.user.name!='activity_mcn'" name="6" label="活动"/>
      <el-tab-pane v-if="$store.state.user.name!='activity_mcn'" name="7" label="频率上传"/>
    </el-tabs>
    <el-tabs v-show="listQuery.bizType==1" v-model="iscollect" @tab-click="tabChange($event,2)">
      <el-tab-pane name="1" label="非合辑"/>
      <el-tab-pane name="2" label="合辑"/>
    </el-tabs>
    <!-- 查询和其他操作 -->
    <div class="filter-container search">
      <div>
        <el-input v-model="listQuery.title" clearable class="" style="width: 200px;" placeholder="请输入媒体名称"/>
      </div>
      <div>
        <el-select v-model="listQuery.type" placeholder="选择媒体类型" style="width:130px;">
          <el-option
            v-for="item in MeterialClipTypeContants"
            :key="item.key"
            :label="item.value"
            :value="item.key"/>
        </el-select>
      </div>
      <div>
        <el-select v-model="listQuery.source" placeholder="选择来源" style="width:130px;" clearable>
          <el-option
            v-for="item in sourceFormat"
            :key="item.key"
            :label="item.value"
            :value="item.key"/>
        </el-select>
      </div>
      <div>
        <el-select v-model="listQuery.auditStatus" placeholder="选择审核状态" style="width:130px;" clearable>
          <el-option
            v-for="item in audioStatusFilter"
            :key="item.key"
            :label="item.value"
            :value="item.key"/>
        </el-select>
      </div>
      <div>
        <el-cascader
          v-model="cateList"
          :options="cateOptions"
          :props="{
            expandTrigger: 'hover',
            value:'id',
            label:'name',
          }"
          placeholder="选择分类"
          clearable
        />
      </div>
      <div class="buttonGroup">
        <el-button class="filter_button" icon="el-icon-search" @click="handleFilter">查找</el-button>
        <el-button class="filter_button" @click="refresh">重置</el-button>
      </div>
    </div>
    <!-- 查询结果 -->
    <!-- <MCTable :data-source="listDataSource"/> -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column align="center" label="序号" prop="id" width="80"/>
      <el-table-column :prop="iscollect==1?'title':'name'" align="center" label="媒体名称"/>
      <el-table-column v-if="iscollect==1" align="center" label="类型">
        <template slot-scope="props">
          <div>
            <span v-show="props.row.type==1">视频</span>
            <span v-show="props.row.type==2">音频</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="iscollect==1" align="center" label="url">
        <template slot-scope="props">
          <div style="cursor:pointer;" class="copy" @click="copy(props.row.url)">
            {{ props.row.url }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="一级分类">
        <template slot-scope="props">
          <div>
            <span>{{ props.row.cateOneText }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="二级分类">
        <template slot-scope="props">
          <div>
            <span>{{ props.row.cateTwoText }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="时间" prop="addTime"/>
      <el-table-column align="center" label="创建人" prop="username" width="80"/>
      <el-table-column align="center" label="关键字" prop="keywords"/>
      <el-table-column v-if="iscollect==1" align="center" label="来源">
        <template slot-scope="props">
          <div>
            <span>{{ props.row.source|from }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150" align="center">
        <template slot-scope="props">
          <el-tag v-show="iscollect==1" :disable-transitions="true" class="hovertype" type="info" @click="views(props.row)"><span>预览</span></el-tag>
          <div v-show="props.row.auditStatus==0" style="display:inline-block;">
            <el-tag :disable-transitions="true" class="hovertype" @click="handleedit(props.row.id,1)"><span>通过</span></el-tag>
            <el-tag :disable-transitions="true" class="hovertype" type="danger" @click="showdialog(props.row.id)"><span>不通过</span></el-tag>
          </div>
          <el-tag v-show="iscollect==2" :disable-transitions="true" class="hovertype" type="info" @click="viewCollect(props.row.id)"><span>查看合辑</span></el-tag>
          <div style="margin-top:10px;">
            <span v-show="props.row.auditStatus==1">审核通过</span>
            <span v-show="props.row.auditStatus==2">审核未通过</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="page" :limit.sync="listQuery.limit" @pagination="sizeChange" />
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      :width="viewWidth"
      title="原因"
    >
      <el-input v-model="content" type="textarea" placeholder="请输入内容"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false,id=''">取 消</el-button>
        <el-button type="primary" @click="handleedit(id,2)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog
      :visible.sync="dialogView"
      :show-close="false"
      :close-on-click-modal="false"
      :width="viewImage.length>0?'40%':'25%'"
      title="预览"
      custom-class="views"
    >
      <div id="mainContainer" class="">
        <div class="video">
          <live-video-area-view
            v-if="video && video.sourceUrl"
            id="mainPlayer"
            ref="mainPlayer"
            :url="video.sourceUrl"
            style="width: 100%; height: 100%;"/>
        </div>
        <div class="img">
          <el-image
            v-for="(item, index) in viewImage"
            :key="index"
            :src="item"
            :preview-src-list="viewImage"/>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureView">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 合辑弹窗 -->
    <el-dialog
      :visible.sync="collview"
      title="查看合辑"
      width="80%"
    >
      <div class="tablewarpper">
        <div class="marginBottom10">
          <span class="marginRight10">合辑ID：{{ collectInfo.id }}</span>
          <span>合辑名称：<el-input v-model="collectInfo.name" style="width:150px;" placeholder="请输入内容"/></span>
        </div>
        <MCTable :data-source="collectDataSource"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="collview = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import BackToTop from '../../../components/BackToTop'
import Pagination from '../../../components/Pagination'
import clipboard from '../../../utils/clipboard'
import { apiMeterial } from '../../../api/mediaManage/index'
import { apiVideo as API } from '../../../api/clip/task'
import Fn from '../../../utils/fn'
import LiveVideoAreaView from '../clip/views/LiveVideoAreaView'
import tabButton from '../../../components/common/tagButton'
import { defaultColums, collectColums } from './columnsData/examineColums'
import {
  sourceFormat,
  MeterialClipTypeContants,
  audioStatusFilter
} from '../../../mixin/MixinContants'
export default {
  name: 'Examine',
  inject: ['reload'],
  components: { BackToTop, Pagination, LiveVideoAreaView, tabButton },
  filters: {
    from(val) {
      if (val === 0) {
        return '本地上传'
      } else if (val == 1) {
        return '录播推送'
      } else if (val == 2) {
        return '媒资剪辑'
      } else if (val == 3) {
        return '本地短视频上传'
      } else if (val == 4) {
        return 'APP发布'
      }
    }
  },
  mixins: [
    sourceFormat.mixin,
    MeterialClipTypeContants.mixin,
    audioStatusFilter.mixin
  ],
  data() {
    return {
      listDataSource: {
        list: [],
        columns: defaultColums,
        operates: {
          fixed: 'right',
          width: '250',
          list: [
            { label: '修改', type: 'warning', show: (row) => (true),
              method: (index, row) => {
                this.handleedit(row, 2)
              }
            },
            { label: '显示', type: 'info', show: (row) => (row.hide === true),
              method: (index, row) => {
                this.handlestatus(row, 1)
              }
            },
            { label: '隐藏', type: 'info', show: (row) => (row.hide === false),
              method: (index, row) => {
                this.handlestatus(row, 1)
              }
            }
          ]
        }
      },
      collectDataSource: {
        list: [],
        columns: collectColums,
        operates: {
          fixed: 'right',
          width: '250',
          list: [
            { label: '预览', type: 'warning', show: (row) => (true),
              method: (index, row) => {
                this.views(row)
              }
            }
          ]
        }
      },
      // 分类表
      cateOptions: [],
      // 搜索绑定的分类
      cateList: [],
      collview: false,
      // 合辑信息
      collectInfo: {
        id: undefined,
        name: undefined,
        clipList: [],
        isCreate: true
      },
      iscollect: '1',
      viewWidth: '',
      video: { sourceUrl: undefined },
      viewImage: [],
      dialogView: false,
      id: '',
      // 不通过原因
      content: '',
      dialogVisible: false,
      page: 1,
      list: [],
      total: 0,
      listLoading: true,
      // 列表和搜索参数
      listQuery: {
        page: 1,
        limit: 20,
        title: undefined,
        beginTime: undefined,
        endTime: undefined,
        source: 3,
        cateOne: undefined,
        cateTwo: undefined,
        type: undefined,
        bizType: '1',
        // inTrash: 1,
        auditStatus: 0,
        sort: 'add_time',
        order: 'asc'
      },
      colOption: [
        {
          value: 0,
          label: '合辑'
        },
        {
          value: 1,
          label: '非合辑'
        }
      ]
    }
  },
  created() {
    if (this.$store.state.user.name === 'activity_mcn') {
      this.listQuery.bizType = '5'
    }
    this.Init()
  },
  mounted() {
    if (!/windows phone|iphone|android/ig.test(window.navigator.userAgent)) {
      // pc
      this.viewWidth = '25%'
    } else {
      // h5
      this.viewWidth = '90%'
    }
  },
  methods: {
    // 获取关联的分类信息
    relationCategory() {
      return new Promise((resolve, reject) => {
        apiMeterial.relationCategory().then(res => {
          if (res.data.resp_code == 0) {
            this.cateOptions = this.formatList(res.data.datas)
            resolve(res.data.datas)
          } else {
            this.toast.fail(res.data.resp_msg)
            reject(res.data)
          }
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: (response.data.resp_msg || {})['errmsg'] || '请联系系统管理员'
          })
          reject(response)
        })
      })
    },
    /**
     * 格式化分类数据
     * @argument type 1[[...],[...]] to 一级:[],二级:[]  2一级:[],二级:[] to [[...],[...]]
    */
    formatCate(type, cateList) {
      let cateInfo = null
      let filterData = null
      if (type == 1) {
        filterData = [...new Set([].concat(...cateList))]
        cateInfo = { cateOneList: [], cateTwoList: [] }
        filterData.forEach(item => {
          this.cateOptions.forEach(cate => {
            if (item == cate.id) {
              cateInfo.cateOneList.push({ ...cate })
            } else {
              cate.children && cate.children.forEach(c => {
                if (item == c.id) {
                  cateInfo.cateTwoList.push({ ...c })
                }
              })
            }
          })
        })
      } else {
        cateInfo = []
        cateList && cateList.forEach(item => {
          item.children.forEach(c => {
            cateInfo.push([item.id, c.id])
          })
        })
      }
      return cateInfo
    },
    // tree结构格式化，去二级children
    formatList(list) {
      list.forEach(item => {
        item.children.forEach(c => {
          c.children = undefined
        })
      })
      return list
    },
    // 合辑详情
    viewCollect(id) {
      this.collectInfo.isCreate = false
      this.$set(this.collectDataSource, 'options', { loading: true })
      API.CollectDetail({ id }).then(res => {
        if (res.data.resp_code === 0) {
          this.collectDataSource.list = res.data.datas.clipList
          this.collectInfo.id = res.data.datas.rdClipCol.id
          this.collectInfo.name = res.data.datas.rdClipCol.name
          this.collview = true
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: (response.data.resp_msg || {})['errmsg'] || '请联系系统管理员'
        })
      }).finally(() => {
        this.$set(this.collectDataSource, 'options', { loading: false })
      })
    },
    sureView() {
      this.dialogView = false
      this.video.sourceUrl = undefined
      this.viewImage = []
    },
    // 预览
    views(row) {
      if (row.picList) {
        this.viewImage = JSON.parse(row.picList) || []
      }
      if (row.meterialMaskUrl) {
        this.video.sourceUrl = row.meterialMaskUrl
      } else if (row.meterialUrl) {
        this.video.sourceUrl = row.meterialUrl
      } else if (row.markUrl) {
        this.video.sourceUrl = row.markUrl
      } else if (row.url) {
        this.video.sourceUrl = row.url
      }
      this.dialogView = true
    },
    tabChange(tab, type) {
      if (type == 1) {
        if (tab.name != '1') {
          this.iscollect = '1'
          this.listQuery.source = undefined
        } else {
          this.listQuery.source = 2
        }
      } else {

      }
      this.page = 1
      this.getList()
    },
    showdialog(id) {
      this.dialogVisible = true
      this.id = id
    },
    sizeChange(val) {
      this.listQuery.limit = val.limit
      this.getList()
    },
    // 重置页面
    refresh() {
      this.reload()
    },
    copy(url) {
      clipboard(url, '.copy')
    },
    // 单条审核
    handleedit: Fn.Confirm(function(id, auditStatus) {
      let dataObj = { id, auditStatus }
      if (auditStatus == 2) {
        if (this.content == '') {
          return this.toast.fail('请填写原因')
        }
        dataObj = {
          ...dataObj,
          auditMsg: this.content
          // inTrash: 1
        }
      }
      const auditInterface = this.iscollect == 1 ? apiMeterial.auditOne : API.auditColl
      auditInterface(dataObj).then(res => {
        if (res.data.resp_code === 0) {
          this.toast.success('操作成功')
          this.getList()
          if (auditStatus == 2) {
            this.dialogVisible = false
            this.id = ''
          }
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: (response.data.resp_msg || {})['errmsg'] || '请联系系统管理员'
        })
      })
    }),
    // 初始化页面
    Init() {
      this.getList()
      this.relationCategory()
    },
    // 搜索
    handleFilter() {
      this.page = 1
      if (this.listQuery.beginTime) {
        this.listQuery.beginTime += ' 00:00:00'
      }
      if (this.listQuery.endTime) {
        this.listQuery.endTime += ' 00:00:00'
      }
      if (this.cateList.length != 0) {
        this.listQuery.cateOne = this.cateList[0] || ''
        this.listQuery.cateTwo = this.cateList[1] || ''
      }
      this.getList()
    },
    // 列表数据
    getList() {
      this.listLoading = true
      this.listQuery.page = this.page
      const list = this.iscollect == 1 ? apiMeterial.auditList : API.CollectAllList
      list({ ...this.listQuery }).then(res => {
        if (res.data.resp_code === 0) {
          this.list = res.data.datas.list || []
          this.total = Number(res.data.datas.total)
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(response => {
        this.listLoading = false
        this.$notify.error({
          title: '失败',
          message: (response.data.resp_msg || {})['errmsg'] || '请联系系统管理员'
        })
      }).finally(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang='scss' scoped>
  .examine{
    .buttons{
      margin: 10px 0;
      .el-tag{
        cursor: pointer;
      }
    }
    .search{
      div{
        display: inline-block;

      }
    }
    ::v-deep #mainContainer{
      width:95%;
      margin:auto;
      display:flex;
      .video{
        min-width: 50%;
        flex:1;
      }
      .img{
        .el-image{
          float: left;
          border-radius: 8px;
          margin-left: 5px;
          margin-bottom: 5px;
          height: auto;
        }
      }
    }
    .tablewarpper{
      max-height: 400px;
      overflow: auto;
    }
    ::v-deep .el-tabs{
      .el-tabs__nav-wrap::after{
        display: none;

      }
    }
  }
</style>
<style>
  .views .el-dialog__body{
      padding:0px !important;
    }
</style>
